<!--
 * @Date: 2022-06-30 15:52:48
 * @LastEditTime: 2022-07-11 16:20:06
-->
<template>
  <div id="lg-main">
    <div id="lg-nav">
      <a id="lg-logo" href="/">sublime</a>
      <div id="lg-padding"></div>
    </div>
    <div id="lg-container">
      <div id="lg-container-left"></div>
      <div id="lg-container-right">
        <div id="lg-panel">
          <div id="lg-topbar">
            <router-link class="lg-hf" to="/login" :class="{'lg-tab-choice': activeLogin}">登录</router-link>
            <router-link class="lg-hf" to="/register" :class="{'lg-tab-choice': !activeLogin}">注册</router-link>
          </div>
          <div id="lg-panel-main">
            <router-view/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      activeLogin: true
    }
  },
  methods: {
    submit: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          return true
        } else {
          return false
        }
      })
    },
    changeTab: function (tab) {
      if (tab === 'login') {
        this.activeLogin = true
      } else { this.activeLogin = false }
    }
  },
  mounted: function () {
    if (this.$route.path === '/register') {
      this.activeLogin = false
    } else {
      this.activeLogin = true
    }
  },
  updated: function () {
    if (this.$route.path === '/register') {
      this.activeLogin = false
    } else {
      this.activeLogin = true
    }
  }
}
</script>

<style>
#lg-main {
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#lg-nav {
  display: flex;
  width: 100%;
  height: 50px;
  background: rgb(239, 244, 250);
  border-bottom: 1px solid #d6dfea;
}
#lg-container {
  width: 80%;
  min-width: 1024px;
  height: calc(100% - 51px);
  display: flex;
}
#lg-container-left {
  height: 100%;
  width: 50%;
}
#lg-container-right {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lg-panel {
  width: 400px;
  height: 500px;
  background: rgba(255, 255, 255);
  /* box-shadow: 0 2px 4px rgb(18 18 18 / 10%); */
  border: 1px solid #a0b1c4;
  border-radius: 5px;
}
#lg-logo {
  margin-left: 30px;
  line-height: 50px;
  height: 100%;
  width: auto;
  font-size: 25px;
  font-weight: 600;
  color: rgb(37, 156, 223)
}
#lg-padding {
  height: 100%;
  flex: 1;
}
#lg-topbar {
  display: flex;
  width: 100%;
  font-size: 20px;
  height: 50px;
  border-bottom: 1px solid #a0b1c4;
  background: rgb(239, 244, 250);
  border-radius: 5px;
}

.lg-hf {
  width: 50%;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  color: rgb(153, 153, 153);
}

.lg-tab-choice {
  color: black;
}
/* .lg-tab-notChoice {
  color: rgb(153, 153, 153);
} */
#lg-panel-main {
  width: 100%;
  height: calc(100% - 50px);
}
#lg-panel-main-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
